<template>
  <div>
    <el-single-select
      :dataObj="purchaseListList"
      :prop="singleSelectColumn"
      :total="singleSelectInput.singleSelectPageTotal"
      @confirm="confirmTrue"
      :page-sizes="[10, 20, 50, 100, 200, 500]"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :dialogVisible.sync="dialogVisible"
      @checkDetail="checkDetail"
      title="付款申请查询"
    >
      <template slot="dialogTop">
        <div class="dialog-input">
          <span class="label">付款申请单编号：</span>
          <el-input
            clearable
            v-model="singleSelectInput.paymentCode"
            placeholder="请输入付款申请单编号"
          ></el-input>
        </div>

        <div class="dialog-input">
          <span class="label">付款申请单名称：</span>
          <el-input
            clearable
            v-model="singleSelectInput.paymentName"
            placeholder="请输入付款申请单名称"
          ></el-input>
        </div>

        <div style="width: 100%; display: flex; justify-content: center">
          <el-button
            size="mini"
            type="primary-font-mini"
            @click="singleSelectSearch"
            >搜索
          </el-button>

          <el-button size="mini" type="default-mini" @click="singleSelectReset"
            >重置
          </el-button>
        </div>
      </template>
    </el-single-select>
  </div>
</template>

<script>
import { qryListByOrgId, qryPaymentdetail } from "@/app/paymentManagement/paymentApplicationChange/apis";
export default {
  name: "contractDialog",
  props: ["reportOrgId"],

  data() {
    return {
      flagNum: false,
      dialogVisible: false,
      title: "选择合同",
      tableData: [],
      // 高级搜索参数
      singleSelectInput: {
        pageNo: 1,
        pageSize: 20,
        singleSelectPageTotal: 0,
      },
      formDataSearch: {},
      total: 0,
      // 乙方表格数据
      purchaseListList: [],
      // 乙方弹窗表头
      singleSelectColumn: [
        { prop: "paymentCode", label: "付款申请单编号" },
        { prop: "paymentName", label: "付款申请单名称" },
        { prop: "contractCode", label: "合同编号" },
        { prop: "contractName", label: "合同名称" },
        { prop: "paymentMoney", label: "申请付款金额" },
      ],
    };
  },
  methods: {
    // 选择行返回当前行数据
    checkDetail(row) {
      qryPaymentdetail({ id: row.id, isShowPageLoading: true }).then((res) => {
        this.formData = res.data.data;
        // 只触发一次
        this.flagNum = !this.flagNum;
        if (this.flagNum) {
          this.$emit("confirmTrueRequestNumber", this.formData);
          setTimeout(() => {
            this.dialogVisible = false;
            this.flagNum = false;
          }, 100);
        }
      });
    },
    // 弹框确定
    confirmTrue(row) {
      console.log(row, "弹框确定");
      this.$emit("confirmTrueRequestNumber", row);
      this.dialogVisible = false;
    },
    // 触发弹框
    openContractDialog() {
      this.singleSelectInput = {
        pageNo: 1, // 分页页码
        pageSize: 20, // 分页每页显示多少数据
        singleSelectPageTotal: 0,
      };
      console.log("打开弹框");
      this.dialogVisible = true;
      this.getContractList(this.singleSelectInput);
    },
    // 调用接口
    getContractList(reqObj) {
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      qryListByOrgId({
        ...obj,
        // reportOrgId: this.reportOrgId,
      }).then((res) => {
        this.purchaseListList = res.data.data.rows;
        console.log(this.purchaseListList)
        this.purchaseListList.forEach(e => {
          if(e.paymentMoney!= undefined || e.paymentMoney!= null)  return e.paymentMoney = Number(e.paymentMoney).toFixed(2)
        });
        this.singleSelectInput.pageNo = res.data.data.pageNo;
        this.singleSelectInput.singleSelectPageTotal =
          res.data.data.recordsTotal;
      });
    },
    // 搜索
    singleSelectSearch() {
      this.formDataSearch = JSON.parse(JSON.stringify(this.singleSelectInput));
      this.getContractList(this.formDataSearch);
    },
    // 重置
    singleSelectReset() {
      this.singleSelectInput = {
        pageNo: 1, // 分页页码
        pageSize: this.singleSelectInput.pageSize, // 分页每页显示多少数据
        singleSelectPageTotal: 0,
      };
      this.getContractList(this.singleSelectInput);
    },
    // 分页操作
    handleSizeChange(val) {
      this.singleSelectInput.pageSize = val;
      this.formDataSearch = {
        ...this.formDataSearch,
        pageNo: this.singleSelectInput.pageNo,
        pageSize: val
      };
      this.getContractList(this.formDataSearch);
    },
    handleCurrentChange(val) {
      this.singleSelectInput.pageNo = val;
      this.formDataSearch = {
        ...this.formDataSearch,
        pageNo: val,
        pageSize: this.singleSelectInput.pageSize
      };
      this.getContractList(this.formDataSearch);
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-single-select .el-dialog__wrapper .el-dialog .el-dialog__body {
  height: 480px !important;
}
/deep/.el-dialog-box .dialog-bottom .el-table--fit {
  max-height: 375px !important;
}
/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}

.remarkClass {
  width: calc(50% + 343px);
}

.dialog-input .label {
  display: inline-block;
  width: 126px;
  height: 30px;
  line-height: 30px;
  text-align: right;
}

.dialog-input /deep/ .el-input {
  width: 260px !important;
}

/deep/
  .el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box {
  overflow: hidden !important;
}

/deep/ .el-table__body-wrapper {
  max-height: 214px !important;
}

/deep/ .el-single-select .el-dialog__wrapper .el-dialog .el-dialog__footer {
  padding: 0px 30px 17px 20px;
}

// 隐藏底部按钮
/deep/ .el-dialog__footer > .dialog-footer:nth-child(2) {
  display: none !important;
}
</style>
